import React, { useEffect, useState } from 'react';
import { List, Form, Input, Button, Statistic, Row, Col } from 'antd';
import { useIntl } from 'umi';

import ProCard from '@ant-design/pro-card';
import WithdrawalModal from '@/components/WithdrawalModal';
import Recharge from '@/components/Recharge';

import style from './accountMine.less';
const data = Array.from({
  length: 3,
}).map((_, i) => ({
  title: `ant ${i}`,
  avatar: `广州 ${i}`,
  description: ` ${i} 笔汇款`,
  content: `${i}`,
}));

const { Search } = Input;
const { Divider } = ProCard;
const AccountMine: React.FC = (props) => {
  const intl = useIntl(); // 国际化
  const t = (id: any) => intl.formatMessage({ id }); // 写成传参方式
  const [open, setOpen] = useState(false); // 全球付开关
  const [recharge, setRechargeOpen] = useState(false); // 充值开关
  const [listData, setListData] = useState('');
  const [form] = Form.useForm();

  const [formReflect] = Form.useForm(); // 全球体现表单收集
  const [formRecharge] = Form.useForm(); // 充值表单收集
  const { storeName } = props; // 用来接收卡片传递过来的小店名称

  //  全球付提现控制开关
  const showModal = () => {
    setOpen(true);
  };

  // 全球付提现控制开关，表单数据回收
  const hideModal = () => {
    setOpen(false);
    // 获取全球付提现表单
    const formReflectData = formReflect.getFieldsValue();
    // console.log("formReflectData", formReflectData);
    formReflect.setFieldsValue({});
  };

  //  全球付提现控制开关
  const showRechargeModal = () => {
    setRechargeOpen(true);
  };

  // 全球付提现控制开关，表单数据回收
  const hideRechargeModal = () => {
    setRechargeOpen(false);
    // 获取全球付提现表单
    const formReflectData = formReflect.getFieldsValue();
    // console.log("formReflectData", formReflectData);
    formReflect.setFieldsValue({});
  };

  // 卡片点击后回显小店数据
  useEffect(() => {
    form.setFieldsValue({
      SubmerchantName: '龙湖小店',
      SubMerchantNo: '66899292923222333',
      TransProcessing: '52笔',
      affiliation: '通话金融-中国香港区机构',
    });
  }, [storeName]);

  return (
    <div className={style.accountcontainlist}>
      <div className={style.headretitle}>
        <ProCard bordered headerBordered>
          <ProCard split="horizontal">
            <ProCard.Group direction={'row'} size={'small'}>
              <ProCard>
                <Statistic title={t('form.Submerchantname')} value="龙湖小店" />
              </ProCard>
              <Divider type={''} />
              <ProCard>
                <Statistic title={t('form.SubmerchantNo')} value="23378281" />
              </ProCard>
              <Divider type={''} />
              <ProCard>
                <Statistic
                  title={t('form.Transactionprocessing')}
                  value={'93笔'}
                />
              </ProCard>
              <Divider type={''} />
              <ProCard>
                <Statistic
                  title={t('form.Affiliatedinstitution')}
                  value="通化金融-中国香港区域机构"
                />
              </ProCard>
            </ProCard.Group>
          </ProCard>
        </ProCard>
      </div>

      <div className={style.bosscontent}>
        <List
          grid={{ gutter: 16, column: 2 }}
          style={{
            height: '100vh',
            overflow: 'auto',
            marginTop: '24px',
          }}
          size="large"
          itemLayout="horizontal"
          // pagination={{
          //   onChange: (page) => {
          //     // console.log(page);
          //   },
          //   pageSize: 10,
          // }}

          dataSource={data}
          renderItem={(item) => (
            <List.Item key={item.title}>
              <ProCard
                title={<>{item.title}</>}
                hoverable
                bordered
                split="horizontal"
                // style={{ width: '90%' }}
                extra={
                  <>
                    <Button
                      type="link"
                      onClick={() => {
                        setRechargeOpen(true);
                        setListData(item);
                      }}
                    >
                      {/* 充值 */}
                      {t('buttons.Recharge')}
                    </Button>
                    <Button
                      type="link"
                      onClick={() => {
                        setOpen(true);
                        setListData(item);
                      }}
                    >
                      {/* 全球付提现 */}
                      {t('buttons.Globalcashwithdrawal')}
                    </Button>
                  </>
                }
              >
                <ProCard split="vertical">
                  <ProCard title={<>{t('form.AccountNo')} </>}></ProCard>
                  <ProCard title={<>{t('form.RemittanceRemarks')}</>}></ProCard>
                </ProCard>
                <ProCard split="vertical">
                  <ProCard
                    title={
                      <>
                        <span className="moneyStyle">{item.content}</span>
                        <span>usd</span>
                      </>
                    }
                  ></ProCard>
                </ProCard>
              </ProCard>
            </List.Item>
          )}
        />
      </div>
      {/* 全球体现modle框 */}
      <WithdrawalModal
        listData={listData} // 传递每行列表的数据
        open={open}
        showModal={showModal}
        hideModal={hideModal}
        form={formReflect}
      />
      {/*充值modle框 */}
      <Recharge
        listData={listData} // 传递每行列表的数据
        open={recharge}
        showModal={showRechargeModal}
        hideModal={hideRechargeModal}
        form={formRecharge}
      />
    </div>
  );
};

export default AccountMine;
